<template></template>

<script setup lang="ts">
import * as L from 'leaflet'
import yulinGeojson from '@/assets/data/yulin.json'
const props = defineProps({
  labels: {
    type: String,
    default: () => {
      return '全部'
    }
  }
})
let point = []

const baseMap = inject('baseMap')

const layer = L.layerGroup()

const handleInitMap = () => {
  markerfeatureforeach(point)
  layer.addTo(toRaw(baseMap.value))
}
const markerfeatureforeach = feature => {
  let marker
  feature.forEach(val => {
    if (!val.parent) {
      marker = L.marker(val.properties.centroid.reverse(), {
        icon: L.divIcon({
          className: 'my-div-icon',
          html: `<div class="city-point">
              <p class="city-point-label">${val.properties.name}</p>
        </div>`
        })
      })
      layer.addLayer(marker)
    } else {
      markerfeatureforeach(val.features)
    }
  })
}
watch(
  () => props.labels,
  (newV, oldV) => {
    point = []
    console.log(point)
    point =
      props.labels == '全部'
        ? _.cloneDeep(yulinGeojson.features)
        : JSON.parse(newV).features
        ? JSON.parse(newV).features
        : [JSON.parse(newV)]
    layer.clearLayers()
    handleInitMap()
  },
  {
    immediate: true,
    deep: true
  }
)
onMounted(() => {
  /*  nextTick(() => {
    point = _.cloneDeep(yulinGeojson.features)
    handleInitMap()
  }) */
})
onUnmounted(() => {
  point = []
  toRaw(baseMap.value).removeLayer(layer)
})
</script>

<style lang="scss">
.city-point {
  display: flex;
  align-items: center;
  flex-direction: column;

  .city-point-label {
    white-space: nowrap;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
  }
}
</style>
